import { CopyOutlined, EditOutlined, DeleteOutlined, EllipsisOutlined, FolderOpenOutlined, FolderOutlined, FolderViewOutlined, ReloadOutlined } from "@ant-design/icons"
import { Button, Dropdown, MenuProps, Tooltip, } from "antd"
import { forwardRef, useImperativeHandle, useState } from "react"
import systemApi from "../../api/system"
import { commonErrorMsg, formatTime, makeClassNameList, toastShort } from "../../utils"
import { DocInstance } from "../../utils/types"

interface Props {
    jumpToDetails?: Function
    project?: DocInstance,
    openEditModal?: Function
    onFinish?: Function
    modal?: any
    layoutType?: 'card' | 'list'
};


const ProjectCard = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        // openModal: openModal
    }));

    const [dropDownOpend, setDropDownOpend] = useState(false);
    const [copyLoading, setCopyLoading] = useState(false);
    const [deleteLoading, setDeleteLoading] = useState(false);

    const {
        jumpToDetails,
        project,
        openEditModal,
        onFinish,
        modal,
        layoutType = 'card'
    } = props;

    const onMenuClick = () => {

    }

    const handleJumpToDetails = () => {
        jumpToDetails && jumpToDetails(project)
    }

    const handleOpenEditModal = () => {
        openEditModal && openEditModal(project);
        setDropDownOpend(false)
    }   

    const handleCreateCopy = () => {

    }

    const comfirmToDeleteTopicTemplate = () => {
        setDeleteLoading(true);
        let params = {
            ids: [project.id]
        }
        systemApi.deleteProject(params)
            .then(res => {
                setDeleteLoading(false);
                setDropDownOpend(false)
                onFinish && onFinish();
            })
            .catch(err => {
                setDeleteLoading(false);
                toastShort('error', commonErrorMsg)
            })
    }

    const dropdownRender = (e) => {
        return (
            <div className="flex-col dropdown-button-group">
                {/* <Tooltip
                    placement={'right'}
                    title={'在当前的模版基础上复制一个新的大纲模版，以便快速生成不同的模版。'}
                >
                    <Button
                        type={'text'}
                        icon={<CopyOutlined />}
                        onClick={handleCreateCopy}
                        loading={copyLoading}
                    >
                        创建副本
                    </Button>
                </Tooltip> */}
                {/* <div className="custom-border" style={{ width: 72 }}></div> */}
                <Button
                    type={'text'}
                    icon={<EditOutlined />}
                    onClick={handleOpenEditModal}
                >
                    基本信息
                </Button>
                <div className="custom-border" style={{ width: 72 }}></div>
                <Button
                    type={'text'}
                    icon={<DeleteOutlined />}
                    loading={deleteLoading}
                    onClick={comfirmToDeleteTopicTemplate}
                    danger
                >
                    删除模版
                </Button>
            </div>
        )
    }

    const onOpenChange = (value: boolean) => {
        setDropDownOpend(value)
    };

    if (layoutType == 'list') {
        return (
            <div
                className={
                    makeClassNameList([
                        'flex-row project-row',
                        project.isDeleted ? 'disable' : null
                    ])
                }
            >
                <div 
                    className="flex-row project-row-left"
                    onClick={handleJumpToDetails}
                >
                    <div className="project-row-icon">
                        <i className="iconfont-1 ghzs-gray-guihuawenjian" />
                    </div>
                    <p 
                        className='project-row-name-text single-line-text'
                        title={project.name}
                    >
                        {/* {project.createUserName} */}
                    </p>
                </div>
                <p className='project-row-info-text'>{project.isDeleted ? 'NA' : formatTime(project.updateDate)}</p>
                <div
                    className='flex-row team-member-group'
                    style={{ width: 160 }}
                >
                    <p className='project-row-info-text'>{formatTime(project.createDate)}</p>
                    {/* <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#bae0ff' }}
                    >
                        <p>蒋</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#b7eb8f' }}
                    >
                        <p>刘</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#fffb8f' }}
                    >
                        <p>魏</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#ffe7ba' }}
                    >
                        <p>胡</p>
                    </div> */}
                </div>
                <Dropdown
                    menu={{ items: [], onClick: onMenuClick }}
                    open={dropDownOpend}
                    trigger={['click']}
                    dropdownRender={dropdownRender}
                    onOpenChange={onOpenChange}
                    disabled={project.isDeleted}
                >
                    <Button
                        icon={<EllipsisOutlined />}
                        className='doc-group-item-option'
                        style={{ marginRight: 42 }}
                        size={'middle'}
                    />
                </Dropdown>
            </div>
        )
    }

    return (
        <div
            className={
                makeClassNameList([
                    'flex-col project-card',
                    project.isDeleted ? 'disable' : null
                ])
            }
        >
            <div className='flex-col project-card-cover'>
                <p className='project-card-title'>{project.name}</p>
                {/* <div className='flex-row team-member-group'>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#bae0ff' }}
                    >
                        <p>蒋</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#b7eb8f' }}
                    >
                        <p>刘</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#fffb8f' }}
                    >
                        <p>魏</p>
                    </div>
                    <div
                        className='flex-row team-member-group-item'
                        style={{ backgroundColor: '#ffe7ba' }}
                    >
                        <p>胡</p>
                    </div>
                </div> */}
            </div>
            <div className='flex-col project-card-footer'>
                <p className='project-card-name  single-line-text'>{project.name}</p>
                <p className='project-card-time'>{project.isDeleted ? 'NA' : formatTime(project.updateDate)}</p>
                <div className='flex-row project-card-footer-bottom'>
                    <Dropdown.Button
                        menu={{ items: [], onClick: onMenuClick }}
                        style={{ width: 118 }}
                        onClick={handleJumpToDetails}
                        open={dropDownOpend}
                        trigger={['click']}
                        dropdownRender={dropdownRender}
                        onOpenChange={onOpenChange}
                        disabled={project.isDeleted}
                    >
                        编制规划
                    </Dropdown.Button>
                </div>
            </div>
        </div>
    )
}


export default forwardRef(ProjectCard)